<template>
  <div>
    登陆
    {{ id }}
    {{ name }}
    <button @click="change"></button>
  </div>
</template>

<script>
import { reactive ,toRefs} from "@vue/reactivity"; //新特性 需要导入
export default {
  name: "login",
  //vue3中没有data响应式数据
  setup() { //zai
    //启动函数   setup(props,{}) 不需要引入
    //reactive（{}）创建响应式数据，接受一个对象为参数，返回响应式数据（双向数据绑定）
    const state = reactive({
      id: 1,
      name: "zhangsan",
    });
    const change=()=>{ //vue3定义方法的方式
        state.id+=1;   //setup没有this绑定
        console.log(state.id);  //数据发生变化，但是页面没有更新
    },
    return{  
        // ...state, //拓展运算符，结构会取消数据双向绑定的特性（此时是单向的）
        //上述解决办法
        ...toRefs(state),  //toRefs把单向数据转换为响应式数据
        change
    }
  },
};
</script>


<style scoped>
</style>